/*
 * Copyright 2019 the original author or authors.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
import { follow, store } from "@mall/api-services"
import { TabBar } from "antd-mobile"
import classNames from "classnames"
import * as React from "react"
import { useCallback, useEffect, useState } from "react"
import { RouteComponentProps } from "react-router"
import Button from "../components/button"
import Flex from "../components/flex"
import Icon from "../icon"
import { StoreCustomCollections } from "./custom-collection"
import "./index.scss"
import StoreProducts from "./products"


interface StorefrontHeaderProps {
  storeId: string
  storeInfo: store.Store;
}

function StorefrontHeader(props: StorefrontHeaderProps) {
  const { storeId, storeInfo } = props
  const [followerCount, setFollowerCount] = useState(0)
  const [followingStore, setFollowingStore] = useState(false)

  const refreshFollowerCount = useCallback(() => {
    follow.FollowServiceV1
      .getStoreFollowerCount(storeId)
      .then(setFollowerCount)
    follow.FollowServiceV1
      .checkFollowingStore(storeId)
      .then(setFollowingStore)
  }, [storeId])

  function handleFollowingStore() {
    const promise = followingStore
      ? follow.FollowServiceV1.unfollowingStore(storeId)
      : follow.FollowServiceV1.followingStore(storeId)
    promise.then(() => refreshFollowerCount())
  }

  useEffect(refreshFollowerCount, [storeId])

  return (
    <Flex className="storefront-header" justifyContent="space-between" alignItems="center">
      <Flex>
        <img className="store-logo" src={storeInfo.logoUrl} alt="store logo"/>
        <Flex direction="column" justifyContent="space-evenly">
          <span className="store-name">{storeInfo.name}</span>
          <span className="store-star-level">{followerCount}人关注</span>
        </Flex>
      </Flex>
      <Button type="primary" size="small" shape="circle"
              className={classNames({
                "unfollow-store-button": followingStore,
              })}
              onClick={handleFollowingStore}>{followingStore ? "取消关注" : <><Icon size="xxs" type="we"/>关注</>}
      </Button>
    </Flex>
  )
}

class StorefrontSearchInput extends React.Component {

  public render() {
    return (
      <div className="storefront-search-input"><Icon type="search"/><span>搜索店铺内宝贝</span></div>
    )
  }
}


interface StorefrontProps extends RouteComponentProps {

}

interface StorefrontState {
  storeInfo: store.Store;
  selectedTab: string;
}

export default class Storefront extends React.Component<StorefrontProps, StorefrontState> {

  public constructor(props: Readonly<StorefrontProps>) {
    super(props)

    this.state = {
      storeInfo: new store.Store(),
      selectedTab: "products",
    }
  }

  public componentDidMount(): void {
    const { match } = this.props
    const storeId = match.params["id"]
    store.StoreServiceV1.getStore(storeId).then(storeInfo => this.setState({ storeInfo }))
  }

  public render() {
    const { match } = this.props
    const storeId = match.params["id"]
    const { storeInfo } = this.state
    return (
      <TabBar
        unselectedTintColor="#949494"
        tintColor="#dc221d"
        barTintColor="white"
        tabBarPosition="bottom">
        <TabBar.Item title="首页"
                     key="index"
                     icon={<Icon type="shop"/>}
                     selectedIcon={<Icon type="shop_fill"/>}
                     selected={this.state.selectedTab === "index"}
                     onPress={() => this.setState({ selectedTab: "index" })}>
          <section className="storefront">
            <StorefrontHeader storeId={storeId} storeInfo={storeInfo}/>
          </section>
        </TabBar.Item>
        <TabBar.Item title="商品"
                     key="products"
                     icon={<Icon type="goods"/>}
                     selectedIcon={<Icon type="goods_fill"/>}
                     selected={this.state.selectedTab === "products"}
                     onPress={() => this.setState({ selectedTab: "products" })}>
          <section className="storefront">
            <StorefrontHeader storeId={storeId} storeInfo={storeInfo}/>
            <StorefrontSearchInput/>
            <StoreProducts storeInfo={storeInfo}/>
          </section>
        </TabBar.Item>
        <TabBar.Item title="分类"
                     key="categories"
                     icon={<Icon type="similar"/>}
                     selectedIcon={<Icon type="similar"/>}
                     selected={this.state.selectedTab === "categories"}
                     onPress={() => this.setState({ selectedTab: "categories" })}>
          <section className="storefront">
            <StorefrontHeader storeId={storeId} storeInfo={storeInfo}/>
            <StorefrontSearchInput/>
            <StoreCustomCollections storeId={storeInfo.id}/>
          </section>
        </TabBar.Item>
        <TabBar.Item title="客服"
                     key="service"
                     icon={<Icon type="service"/>}
                     selectedIcon={<Icon type="service"/>}
                     selected={this.state.selectedTab === "service"}
                     onPress={() => this.setState({ selectedTab: "service" })}>
          hello
        </TabBar.Item>
      </TabBar>
    )
  }
}
